<template>
  <div>
    <v-touch class="swiper-div" @swiperight="onSwiperRight" :swipe-options="{direction: 'horizontal'}">
      <head-top :title="'修改密码'"></head-top>
      <div class="body-content">
      <div class="login-div-item">
        <div class="login-div-item-img div-align-justify-center">
          <img class="icon-24" src="@/static/icon/lock.png" alt=""/>
        </div>
        <input v-model="password.old" class="login-div-item-input" :type="ifShowPwd.old ? 'text' : 'password'"
               placeholder="请输入密码"/>
        <img v-if="!ifShowPwd.old" class="icon-20" src="@/static/icon/20px_eye_closed.png" @click="ifShowPwd.old = !ifShowPwd.old" alt=""/>
        <img v-if="ifShowPwd.old" class="icon-20" src="@/static/icon/20px_eye_open.png" @click="ifShowPwd.old = !ifShowPwd.old" alt=""/>
      </div>
      <div class="login-div-item">
        <div class="login-div-item-img div-align-justify-center">
          <img class="icon-24" src="@/static/icon/lock.png" alt=""/>
        </div>
        <input v-model="password.new" class="login-div-item-input" :type="ifShowPwd.new ? 'text' : 'password'"
               placeholder="请输入密码"/>
        <img v-if="!ifShowPwd.new" class="icon-20" src="@/static/icon/20px_eye_closed.png" @click="ifShowPwd.new = !ifShowPwd.new" alt=""/>
        <img v-if="ifShowPwd.new" class="icon-20" src="@/static/icon/20px_eye_open.png" @click="ifShowPwd.new = !ifShowPwd.new" alt=""/>
      </div>
      <div class="button-all body-heavy div-align-justify-center"
           :class="password.old && password.new ? 'button-all-active' : '' "
           @click="changePassword">修改密码</div>
    </div>
    </v-touch>
  </div>
</template>

<script>
import HeadTop from "@/components/HeadTop"
import {changePassword} from "@/request/api";
import {Toast} from "vant";
export default {
  components: {
    HeadTop,
  },
  name: "ProfileViewPassword",
  data() {
    return {
      ifShowPwd: {
        old: false,
        new: false,
      },
      password: {
        old: '',
        new: '',
      },
    };
  },
  methods: {
    changePassword() {
      if (this.password.old && this.password.new) {
        changePassword({
          pathParam: this.$route.params.id,
          old_password: this.password.old,
          new_password: this.password.new,
        }).then(res => {
          const { State, Msg } = res
          if (State) {
            this.$router.push(this.GLOBAL.pathSetting.profile.main)
          } else {
            Toast(Msg)
          }
        })
      }
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.login-div-item {
  height: 44px;
  margin-top: 24px;
  background: #FAFAFA;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.login-div-item-img {
  height: 44px;
  width: 44px;
  background: #FFF5CC;
  border-radius: 8px 0 0 8px;
}

.login-div-item-input {
  height: 44px;
  width: 260px;
  border: none;
  background: #FAFAFA;
  border-radius: 0 8px 8px 0;
}
input {
  padding-left: 8px;
}
input::-webkit-input-placeholder {
  padding-left: 8px;
}
</style>
<style>
</style>